<template>
  <div class="menu" style="overflow: hidden;">
    <div class="menu_left">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item :title="menu.name" v-for="(menu,index) in menuList" :key="index" :badge="badge"
          @click="jump(index)">
        </van-sidebar-item>
      </van-sidebar>
    </div>
    <div class="menu_right">
      <div :style="scaleFun" style=" transition-duration: 500ms;">
        <div v-for="(foodtype,index) in foodtypes" :key="index">
          <div class="foodtype">{{foodtypes[index].name}}</div>
          <div v-for="(food,index) in foodList[index].foods" :key="index" style="overflow: hidden;" class="food_list">
            <img src="../assets/e6be10c95466b166.jpg" alt="" class="shop_detail_img">
            <div class="foodDetail" style="float: left;">
              <div class="food">{{food.name}}</div>
              <div class="foodMiddle">
                <span>月售:{{food.month_sales}}份</span><span>好评率:{{food.satisfy_rate}}%</span>
              </div>
              <div class="foodFooter">
                <span style="margin-right: 2rem;">￥{{food.specfoods[0].price}}</span>
                <carcontrol :food="food" :foodList="foodList" @changeMoney="changeMoney" ref="count"></carcontrol>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import carcontrol from "@/components/carcontrol.vue";
  export default {
    name: "food",
    data() {
      return {
        value: "",
        total: 0,
        price: '',
        activeKey: "",
        badge: "",
        buyfood: "",
      }
    },
    computed: {
      scaleFun() {
        var scale = -this.total;
        return `transform:translateY(${scale + 'px'})`
      }
    },
    props: {
      menuList: {
        type: Array,
        default: function () {
          return []
        }
      },
      foodtypes: {
        type: Array,
        default: function () {
          return []
        }
      },
      foodList: {
        type: Array,
        default: function () {
          return []
        }
      },
    },
    // beforeRouteEnter(to, from, next) {
    //   next(vm => {
    //   vm.buyfood = JSON.parse(localStorage.getItem("car"));
    //   console.log(vm.buyfood);
    //   vm.foodList.forEach(item => {
    //     // for (let index = 0; index < this.buyfood.length; index++) {
    //       // if (item.description == this.buyfood[index].description) {
    //         item.foods.forEach(element => {
    //           for (let index = 0; index < vm.buyfood.length; index++) {
    //           if (element.name == vm.buyfood[index].name) {
    //             element.count = vm.buyfood[index].count;
    //           }
    //         }
    //         });
    //       // }
    //     // }
    //   });
    //   });
    // },
    // created() {
    //   this.buyfood = JSON.parse(localStorage.getItem("car"));
    //   console.log(this.buyfood);
    //   console.log(this.foodList);
    //   this.foodList.forEach(item => {
    //     console.log(this.buyfood);
    //     // for (let index = 0; index < this.buyfood.length; index++) {
    //     // if (item.description == this.buyfood[index].description) {
    //     item.foods.forEach(element => {
    //       for (let index = 0; index < this.buyfood.length; index++) {
    //         // console.log(index); 
    //         if (element.name == this.buyfood[index].name) {
    //           element.count = this.buyfood[index].count;
    //         }
    //       }
    //     });
    //     // }
    //     // }
    //   });
    // },
    methods: {
      jump(index) {
        let jump = document.querySelectorAll('.foodtype');
        let total = jump[index].offsetTop;
        this.total = total;
        console.log(this.foodList);
      },
      changeMoney(money) {
        this.$emit("totleMoney", money);
      }
    },
    components: {
      carcontrol,
    }
  }
</script>
<style lang="less" scoped>
  .shop_detail_img {
    float: left;
    border-radius: 0.15rem;
    width: 25%;
  }

  .menu_left {
    width: 25%;
    background-color: rgb(245, 245, 245);
    float: left;
    overflow: auto;
    height: 600px;
    /*no*/
  }

  .van-sidebar {
    width: 100%;
  }

  .van-sidebar-item {
    padding: 0.5rem 0;
    font-size: 0.4rem;
    border-bottom: 1px solid rgb(237, 237, 237); /* no */
  }

  .van-sidebar-item--select::before {
    height: 100%;
  }

  .menu_right {
    width: 75%;
    background-color: white;
    float: left;
    overflow-y: auto;
    height: 600px;
    /*no*/
  }

  .food_list {
    overflow: hidden;
    height: 100px;
    padding: 0.3rem;
    height: 100px;
    /*no*/
    border-bottom: 1px solid whitesmoke;
  }

  .foodtype {
    background-color: whitesmoke;
    font-size: 0.5rem;
    padding: 0.3rem;
    text-align: left;
  }

  .foodDetail {
    float: left;
    text-align: left;
    margin-left: 0.2rem;
  }

  .food {
    font-size: 0.45rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
    margin-top: 0.1rem;
  }

  .foodMiddle {
    font-size: 0.32rem;
    margin-bottom: 0.3rem;
  }

  .foodFooter {
    font-size: 0.4rem;
    color: red;
    font-weight: 600;
    display: flex;
    justify-content: space-around;
  }

  .van-button--normal {
    border-radius: 50%;
  }

  .van-button--primary {
    color: #fff;
    background-color: #3190e8;
    border: 0.013333rem solid #3190e8;
    margin-left: 0.4rem;
  }
</style>